<html>
  <head>
    <style>
      body {
        margin: 0;
        background: black;
      }
      * {
        font-weight: 300;
        text-shadow: 0px 0px 5px white;
      }

      canvas {
        width: 100%;
        height: 100%;
        cursor: none;
        image-rendering: crisp-edges;
      }

      svg {
        display: none;
      }

      tt {
        font-size: 80px;
        font-weight: 800;
        margin: 100px 0 10px 0;
        background: -webkit-linear-gradient(#fff, #4376fd);
        text-shadow: 0 0 5px white;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        border-bottom: 2px solid grey;
        padding-bottom: 16px;
        letter-spacing: 6px;
      }

      ts {
        font-size: 35px;
        color: grey;
        margin-bottom: 150px;
        font-weight: 400;
        text-shadow: 0 0 3px grey;
      }

      t {
        position: absolute;
        background-color: black;
        width: 100%;
        height: 100%;
        color: antiquewhite;
        display: flex;
        flex-direction: column;
        align-items: center;
        opacity: 0.7;
        text-align: center;
      }

      l {
        display: block;
        line-height: 80px;
        font-size: 30px;
      }

      h1,
      w {
        font-size: 50px;
      }

      button {
        display: block;
        margin-bottom: 60px;
        background: black;
        border: none;
        color: white;
        font-size: 40px;
        transition: 0.3s ease-in-out;
        cursor: pointer;
        width: 100%;
      }

      button:hover {
        font-size: 45px;
      }

      .r {
        display: none !important;
      }

      h {
        font-size: 20px;
        color: grey;
      }
    </style>
  </head>

  <body>
    <t>
      <tt class="t">The Wandering Wraith</tt>
      <ts class="t">...or the grand venture of going back to the grave.</ts>
      <w>Loading...</w>
      <div id="o" class="r">
        <button id="c">Continue</button>
        <button id="n">New game</button>
      </div>

      <div id="f" class="r">
        <h1>THE END</h1>
        <l>The wraith found his peace back in the grave.</l>
        <l>Time: <span id="tm"></span></l>
        <l>Collected <span id="p"></span>/75 crystals</l>
        <l>Died <span id="d"></span> times</l>
        <h>Press ESC to continue</h>
      </div>

      <div id="r" class="r">
        <h1>A js13k challenge by</h1>
        <h2>Mateusz Tomczyk</h2>
        <h3>Thanks to Frank Force for ZzFX</h3>
        <h>Press ESC to continue</h>
      </div>
    </t>

    <canvas></canvas>

    <img inline src="assets/head.svg" />
    <img inline src="assets/eyes.svg" />
    <img inline src="assets/torso.svg" />
    <img inline src="assets/limb.svg" />
    <img inline src="assets/scaffold.svg" />
    <img inline src="assets/hangman.svg" />
  </body>
</html>
